<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>榜单排名</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />

  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/datepicker/datepicker.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/slider/slider.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/chosen/chosen.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">

  <section class="vbox">
            <section class="scrollable wrapper">
              <h2 class="font-thin m-b">榜单排名</h2><!-- 从上到下依次为评分最高者 点赞数最多者 各显示前20名次 movie‘s name 为链接 可连接到对应作品详情页-->
              <div class="col-sm-6">
                    <section class="panel panel-default">
                      <header class="panel-heading font-bold">评分排名</header>
                      <table class="table table-striped m-b-none">
                        
                          <tr>
                            <th>名次</th>
                            <th>作品名称</th>
                            <th>作者</th>
                            <th>平均分</th>

                          </tr>
                      
                        <tbody>
                        <c:forEach var="article" items="${greatList}" varStatus="status">
                          <tr>
                            <td>&nbsp;&nbsp;${status.count}</td>
                            <td><a href="#">${article.title}</a></td>
                            <td><a href="#">${article.authorName}</a></td>
                            <td>
                              <a href="#">
                                <fmt:formatNumber type="number" value="${article.avgGreat}" pattern="0.00" maxFractionDigits="2"/>
                              </a>
                            </td>
                          </tr>
                        </c:forEach>
                        </tbody>
                      </table>
                    </section>
              </div>
             
              <div class="col-sm-6">
                  <section class="panel panel-default">
                    <header class="panel-heading font-bold">点赞排名</header>
                    <table class="table table-striped m-b-none">
                      
                        <tr>
                          <th>名次</th>
                          <th>作品名称</th>
                          <th>作者</th>
                          <th>点赞次数</th>

                        </tr>
                    
                      <tbody>

                      <c:forEach var="article" items="${likeList}" varStatus="status">
                        <tr>
                          <td>&nbsp;&nbsp;${status.count}</td>
                          <td><a href="#">${article.title}</a></td>
                          <td><a href="#">${article.authorName}</a></td>
                          <td><a href="#">${article.likeNum}</a></td>
                        </tr>
                      </c:forEach>

                      </tbody>
                    </table>
                  </section>
              </div>  
            </section>
          </section>

  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
  <!-- App -->
  <script src="${pageContext.request.contextPath}/js/app.js"></script>

  <!-- datepicker -->
  <script src="${pageContext.request.contextPath}/js/datepicker/bootstrap-datepicker.js"></script>
  <!-- slider -->
  <script src="${pageContext.request.contextPath}/js/slider/bootstrap-slider.js"></script>
  <!-- file input -->  
  <script src="${pageContext.request.contextPath}/js/file-input/bootstrap-filestyle.min.js"></script>
  <!-- wysiwyg -->
  <script src="${pageContext.request.contextPath}/js/wysiwyg/jquery.hotkeys.js"></script>
  <script src="${pageContext.request.contextPath}/js/wysiwyg/bootstrap-wysiwyg.js"></script>
  <script src="${pageContext.request.contextPath}/js/wysiwyg/demo.js"></script>
  <!-- markdown -->
  <script src="${pageContext.request.contextPath}/js/markdown/epiceditor.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/markdown/demo.js"></script>

  <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>

</body>
</html>